<div>
  <cly-header>
      <template v-slot:header-left>
      <h2 class="cly-vue-remote-config__header"> {{i18n('remote-config.title')}} 
      </h2>
    </template>
    <template v-slot:header-right>
      <div class="bu-level-item" v-if="hasCreateRight">
        <el-button @click="create" type="success" size="small" icon="el-icon-circle-plus">Add Condition</el-button>
      </div>
    </template>
  </cly-header>
  <cly-main>
    <cly-datatable-n :rows="tableRows" :force-loading="isTableLoading" class="cly-vue-remote-config-conditions-table"  :row-class-name="tableRowClassName">
      <template v-slot="scope">
        <el-table-column  prop="condition_name" :label="i18n('remote-config.condition-name')" sortable="custom">
          <template v-slot="rowScope">
            <div>
              <div class="cly-vue-remote-config-conditions-drawer__margin-bottom"> {{rowScope.row.condition_name}}</div>
              <div class="color-cool-gray-40 text-small">  {{rowScope.row.used_in_parameters}} {{i18n('remote-config.conditions.parameter.affected')}}</div>
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="condition_description" :label="i18n('remote-config.description')">
          <template v-slot:default="rowScope">
            {{rowScope.row.condition_description || "-"}}
          </template>
        </el-table-column>
        <el-table-column prop="condition_definition" :label="i18n('remote-config.definition')">
          <template v-slot:default="rowScope">
            <div v-html="rowScope.row.condition_definition"></div>
          </template>
        </el-table-column>
        <el-table-column prop="seed_value" :label="i18n('remote-config.seed-value')">
          <template v-slot:default="rowScope">
            {{rowScope.row.seed_value || "Default"}}
          </template>
        </el-table-column>
        <el-table-column type="options" v-if="hasUpdateRight || hasDeleteRight">
          <template v-slot="rowScope">
            <cly-more-options v-if="rowScope.row.hover" size="small" @command="handleCommand($event, scope, rowScope.row)">
              <el-dropdown-item v-if="hasUpdateRight" command="edit">{{i18n('common.edit')}}</el-dropdown-item>
              <el-dropdown-item v-if="hasDeleteRight" command="remove">{{i18n('common.delete')}}</el-dropdown-item>
            </cly-more-options>
          </template>
        </el-table-column>
      </template>
    </cly-datatable-n>
  </cly-main>
  <drawer :controls="drawers.conditions" @submit="onSubmit"></drawer>
</div>